<template>
    <div>
        <el-input v-show="isClick" ref="elInput" :autofocus="true" @blur="changeInput" v-model="value"></el-input>
        <div v-show="!isClick" @click.stop="isClick=true">{{ value }}</div>
    </div>
</template>
<script>
import {editCommad} from "@/api/middleControl/middleControl";
export default {
    props:{
        value:'',
        item:'',
    },
    data () {
        return {
            isClick:false
        }
    },
    methods: {
        changeInput(val){
            let data={
                purposeField:this.value,
                purposeMachine:this.item.purposeMachine,
                purposeMachineId:this.item.purposeMachineId
            }
            editCommad(this.item.id,data).then(res=>{
                this.$emit('update:value', this.value)
                this.isClick=false
            }).catch(err=>{
                this.isClick=false
                // this.isClick=true
            })
        }
    },
    watch:{
        isClick(bool){
            if(bool){
                this.$nextTick(()=>{
                    this.$refs.elInput.focus()
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>

</style>
